.theme-pink{
  background-color: var(--p-bgc-1);
  .zy-select{
    color: var(--p-fc-1);
    background-color: var(--p-bgc-1);
    box-shadow: var(--p-bsc);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    &:hover{
      box-shadow: var(--p-bsc-hover);
    }
    .vs-options{
      background-color: var(--p-bgc-1);
      box-shadow: var(--p-bsc);
      ul{
        overflow-y: scroll;
        li{
          &:hover{
            background-color: var(--p-c-1);
          }
          &.active{
            background-color: var(--p-c-3);
          }
        }
      }
    }
    .vs-input{
      color: var(--p-fc-1);
      background-color: var(--p-bgc-1);
      input{
        color: var(--p-fc-1);
        &::-webkit-input-placeholder{
          color: var(--p-fc-1);
        }
      }
    }
  }
  .zy-input{
    color: var(--p-fc-1);
    background-color: var(--p-bgc-1);
    input{
      color: var(--p-fc-1);
    }
  }
  .zy-scroll{
    &:hover{
      &::-webkit-scrollbar-thumb {
        box-shadow: var(--p-bsc-scroll);
        background: var(--p-c-5);
      }
      &::-webkit-scrollbar-track {
        box-shadow: var(--p-bsc-scroll);
        background: var(--p-bgc-1);
      }
    }
  }
  .zy-loading{
    .loader{
      color: var(--p-c-3);
    }
  }
  .zy-body{
    background-color: var(--p-bgc-2);
  }
  .aside{
    .zy-svg{
      svg{
        stroke: var(--p-c-0);
      }
      &:hover{
        background-color: var(--p-c-2);
      }
      &.active{
        background-color: var(--p-bgc-2);
        svg{
          stroke: var(--p-c-0);
          stroke-width: 2;
          fill: var(--p-c-2);
        }
      }
    }
  }
  .frame{
    span{
      &.min{
        background-color: #32dc36;
      }
      &.max{
        background-color: #ffbe2a;
      }
      &.close{
        background-color: #ff5f56;
      }
      &.top{
        background-color: #f3bab7;
      }
    }
  }
  .detail{
    color: var(--p-fc-1) !important;
    background-color:var(--p-bgc-1);
    box-shadow: var(--p-bsc-2);
    .detail-content{
      .detail-close{
        svg{
          stroke-width: 1;
          stroke: var(--p-c-8);
          &:hover{
            stroke-width: 2px;
            stroke: var(--p-c-9);
          }
        }
      }
      .detail-body{
        .info, .desc, .m3u8, .operate{
          border-color: var(--p-c-2);
        }
        .operate{
          span{
            &:hover{
              color: var(--p-fc-2);
            }
          }
        }
        .m3u8{
          .box{
            span{
              border-color: var(--p-c-5);
              &:hover{
                color: var(--p-fc-2);
                background-color: var(--p-c-1);
                border-color: var(--p-c-8);
              }
            }
            .selected {
              background-color: var(--p-c-5);
              &:hover{
                background-color: var(--p-c-5);
              }
            }
          }
          .show-picture{
            color: var(--p-fc-1);
            .card{
              background-color: var(--p-bgc-3);
              box-shadow: var(--p-bsc);
              transition: all 0.3s cubic-bezier(.25,.8,.25,1);
              &:hover{
                box-shadow: var(--p-bsc-hover);
              }
            }
          }
        }
      }
    }
  }
  .play{
    background-color: var(--p-bgc-1);
    box-shadow: var(--p-bsc);
    .el-input{
      input{
        background-color: var(--p-bgc-1);
        border: 1px solid var(--p-bgc-1);
        color: var(--p-fc-2);
      }
    }
    .title{
      color: var(--p-fc-1);
      .right {
        svg {
          fill: var(--p-fc-1);
        }
      }
    }
    .box{
      .title{
        .right{
          color: var(--p-fc-2);
          svg{
            stroke: var(--p-c-5);
            stroke-width: 1;
            fill: none;
            &:hover{
              stroke: var(--p-c-8);
              stroke-width: 1.5;
              fill: var(--p-c-2);
            }
          }
        }
      }
      .more{
        span{
          svg{
            stroke: var(--p-c-5);
            stroke-width: 1;
            fill: none;
          }
          &:hover{
            svg{
              stroke: var(--p-c-8);
              stroke-width: 1.5;
              fill: var(--p-c-2);
            }
          }
          &.active{
            svg{
              stroke: var(--p-c-9);
              stroke-width: 2;
              fill: var(--p-c-3);
            }
          }
          &.last-tip {
            color: var(--p-fc-1);
            font-size: 14px;
          }
        }
      }
    }
    .list{
      border: 1px solid var(--p-c-3);
      background-color: var(--p-bgc-2);
      .list-top{
        color: var(--p-fc-2);
        .list-top-close{
          svg{
            stroke: var(--p-c-5);
            stroke-width: 1;
            fill: none;
            &:hover{
              stroke: var(--p-c-8);
              stroke-width: 1.5;
              fill: var(--p-c-2);
            }
          }
        }
      }
      .list-body{
        .list-item{
          li{
            color: var(--p-fc-1);
            &.active{
              background-color: var(--p-c-2);
              color: var(--p-fc-3);
            }
            &:hover{
              background-color: var(--p-c-3);
            }
          }
        }
        .list-channels{
          .btn{
            color: var(--p-fc-1);
            &:hover{
              text-decoration:underline;
            }
          }
        }
        .list-history{
          li{
            .title{
              color: var(--p-fc-1);
            }
            &.active{
              background-color: var(--p-c-2);
              .title{
                color: var(--p-fc-3);
              }
            }
            &:hover{
              background-color: var(--p-c-3);
              .detail-delete{
                display: inline-block;
                color: var(--p-fc-2);
              }
            }
            .detail-delete{
              &:hover{
                background-color: var(--p-c-2);
              }
            }
          }
        }
      }
    }
  }
  .setting{
    background-color: var(--p-bgc-1);
    box-shadow: var(--p-bsc);
    .info{
      a{
        color: var(--p-fc-1);
        &:hover{
          color: var(--p-fc-2);
        }
      }
    }
    .view, .search, .shortcut, .site{
      .title{
        color: var(--p-fc-1);
      }
    }
    .theme{
      .title{
        color: var(--p-fc-1);
      }
      .theme-item{
        box-shadow: var(--p-bsc);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        &:hover{
          box-shadow: var(--p-bsc-hover);
          .theme-name{
            color: var(--p-fc-2)
          }
        }
        .theme-name{
          color: var(--p-fc-1);
        }
      }
    }
    .qrcode{
      .title{
        color: var(--p-fc-1);
      }
      .qrcode-item{
        box-shadow: var(--p-bsc);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        &:hover{
          box-shadow: var(--p-bsc-hover);
        }
      }
    }
  }
  .share{
    background-color: var(--p-bgc-1);
    color: var(--p-fc-1);
    border: 1px solid var(--p-c-8);
    .right{
      color: var(--p-fc-1);
      .tops{
        color: var(--p-fc-2);
      }
    }
    .share-mask{
      background-color: var(--p-bgc-1);
    }
  }
  .history{
    background-color: var(--p-bgc-1);
    box-shadow: var(--p-bsc);
  }

  // Page of list using table and picture
  .listpage{
    color: var(--p-fc-2);
    .listpage-header-divider{
      background-color: var(--p-bgc-1);
      .el-divider__text {
        background-color: var(--p-bgc-2);
      }
      .el-button{
        background-color: var(--p-bgc-2);
        color: var(--p-fc-2);
        &:hover{
          color: var(--p-fc-3)
        }
      }
    }
    .listpage-header, .toolbar{
      border-bottom-color: var(--p-c-3);
      .btn{
        &:hover{
          color: var(--p-fc-3)
        }
      }
      .el-button{
        background-color: var(--p-bgc-2);
        color: var(--p-fc-2);
        &:hover{
          color: var(--p-fc-3)
        }
      }
      .el-input{
        input{
          background-color: var(--p-bgc-1);
          border: 1px solid var(--p-bgc-1);
          color: var(--p-fc-2);
        }
      }
      .el-input-group__prepend{
        background-color: var(--p-bgc-1);
      }
      .popper {
        color: var(--p-fc-1);
        background-color: var(--p-bgc-1);
        box-shadow: var(--p-bsc);
        li {
          color: var(--p-fc-1);
          background-color: var(--p-bgc-1);
          &:hover{
            background-color: var(--p-bgc-2);
          }
        }
      }
      .popper__arrow, .popper__arrow::after{
        border-bottom-color: var(--p-bgc-1);
      }
    }
    .listpage-body{
      color: var(--p-fc-1);
      background-color: var(--p-bgc-1);
      &:hover{
        &::-webkit-scrollbar-thumb {
          box-shadow: var(--p-bsc-scroll);
          background: var(--p-c-5);
        }
        &::-webkit-scrollbar-track {
          box-shadow: var(--p-bsc-scroll);
          background: var(--p-bgc-1);
        }
      }
      /* 设置el-table的样式*/
      .show-table{
        .el-table{
          color: var(--p-fc-1);
          background-color: var(--p-bgc-1);
        }
        .el-table__body-wrapper{
          &:hover{
            &::-webkit-scrollbar-thumb {
              box-shadow: var(--p-bsc-scroll);
              background: var(--p-c-5);
            }
            &::-webkit-scrollbar-track {
              box-shadow: var(--p-bsc-scroll);
              background: var(--p-bgc-1);
            }
          }
        }
       .el-input{
          input{
            background-color: var(--p-bgc-2);
            border: 1px solid var(--p-bgc-2);
            color: var(--p-fc-1);
          }
        }
        .el-table__header th, .el-table__header tr, .el-table__body td,.el-table__body th{
          color: var(--p-fc-1);
          background-color: var(--p-bgc-1);
          border-bottom-color: var(--p-c-2);
        }
        .el-table--enable-row-hover .el-table__body tr:hover>td{
          background-color: var(--p-bgc-2);
        }
        .el-button{
          color: var(--p-fc-1);
          &:hover{
            color: var(--p-fc-3)
          }
        }
      }
      .show-picture{
        color: var(--p-fc-1);
        .card{
          background-color: var(--p-bgc-3);
          box-shadow: var(--p-bsc);
          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
          &:hover{
            box-shadow: var(--p-bsc-hover);
          }
        }
      }
    }
  }
}
